/**
 * Created by jiangtao on 2017/6/1.
 */


import React , { Component } from 'react';

import connect from './../../redux/connect';

import CustomLink from './../../components/CustomLink';

import './../../styles/mobile/category.scss';

class Index extends Component {

    constructor( props ){
        super();
        const { category , page } = this.getParams(props);
        this.category = category;
        this.page = page;
    }

    componentWillReceiveProps( nextProps){
        const { category , page } = this.getParams( nextProps );
        if( category != this.category || page != this.page ) {
            this.category = category;
            this.page = page;
            this.getData();
        }
    }

    getData(){
        this.props.homeActions.getList({
            page:this.page == "*" ? 1 : this.page,
            tab:this.category,
            limit:40
        });
    }

    getParams( props ){
        const { match } = props;
        return match.params;
    }

    componentDidMount() {
        this.getData();
    }

    render(){
        const { homeReducer } = this.props;
        const { tabs , dataList } = homeReducer;
        return(
           <div className="category-box">
               <div className="nav-bar">
                   {tabs.map(( val , index )=> {
                       const category = val.category ? val.category : "all";
                       return (
                           <CustomLink className="tab" to={`/app/tab/${category}`} key={index}>
                               {val.name}
                           </CustomLink>
                       )
                   })}
               </div>
               <div className="category-list">
                   {dataList.map(( val  , index ) => {
                       const {
                           author ,
                           title ,
                           visit_count ,
                           reply_count,
                           create_at
                       } = val;
                       return (
                           <div className="list" key={index}>
                               <div className="avator" style={{backgroundImage:`url(${author.avatar_url})`}} />
                               <div className="content">
                                   <div className="title text-overflow-1">
                                       {title}
                                   </div>
                                   <div className="other">
                                       <span className="active">{reply_count}</span>
                                       <span> / </span>
                                       <span>{visit_count}</span>
                                   </div>
                               </div>
                               <div className="right">
                                  <span>{getFormatTime( create_at )}</span>
                               </div>
                           </div>
                       )

                   })}
               </div>
           </div>
        )
    }
}

import homeActions from './../../redux/action/home';

export default connect({
    reducers:{
        homeReducer:"home"
    },
    actions:{
        homeActions:homeActions
    }
})(Index);
